<template>
  <u-popup :show="show" mode="center"  @close="closeHandle" bgColor="transparent">
    <view class="invite-poster-wrapper" @click="closeHandle">
      <image :show-menu-by-longpress='true' :src="downloadUrl" mode="widthFix"></image>
      
      <view class="save-tip-wrapper">
        <div class="save-tip">
          <u-icon size="36rpx" name="download" color="#953C13"></u-icon>
          长按图片保存 
        </div>
      </view>
    </view>
  </u-popup>
</template>

<script>
  import {getQrcodeUrl} from '@/common/api/index_api.js'
  import {
    useDrawPoster
  } from '@/components/u-draw-poster'
  import {
    saveLocalImg
  } from '@/common/utils/util.js'
  import {
  	mapGetters
  } from 'vuex'
  
  export default{
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      // scene:{
      //   type:String,
      //   default:''
      // },
      // page:{
      //   type:String,
      //   default:''
      // },
      clientUserUid:{
        type:String,
        default:''
      },
      avatar:{
        type:String,
        default:''
      },
      nickName:{
        type:String,
        default:''
      },
      
    },
    watch:{
      visible:{
        handler(val){
          this.ok = true
          this.show = false
          if(val){
            
            this.createChipCanvas()
          }
          
        },
        immediate:true
      },
    },
    computed:{
      // ...mapGetters('user', [
      //   'clientUserUid',
      //   'avatar',
      //   'nickName'
      // ]),	
    },
    data() {
      return {
        ok:true,
        show:false,
        staticImgs:{
          img:this.imgBaseURL + '/task-center/invite-poster-psychology.png',
        },
        qrCode:'',
        // avatr:'',
        // name:'',
        downloadUrl:'',
        scene:'',
        page:''
      }
    },
    methods:{
      async getQrcode(){
        this.scene = 'r=5@id='+this.clientUserUid
        this.page = 'pages/index/index'
        const {data:dRes} = await getQrcodeUrl({
          sceneStr:this.scene,
          pageStr:this.page
        })
        
        if(dRes.success){
          this.qrCode = dRes.data
        }
        
        if(!dRes.success || !this.qrCode){
          uni.showToast({
            title: '获取二维码失败，请重新打开海报',
            icon: 'none'
          })
          
          this.ok = false
          this.closeHandle()
        }
        
      },
      confirmHandle(){
        this.$emit('confirm')
      },
      closeHandle(){
        this.show = false
        this.$emit('close')
      },
      async createChipCanvas() {
        uni.showLoading({
          title: '生成中...',
          mask: true
        })
        
        await this.getQrcode()
        
        if(!this.ok){
          uni.hideLoading()
          return false
        }
        
        try{
          // 创建绘制工具
          const dp = await useDrawPoster({
            selector: 'dcanvas',
            loading: true,
            debug: true,
            width: 750,
            height: 1500
          })
          const w = dp.canvas.width
          const h = dp.canvas.height
          
          dp.draw(async (ctx) => {
            // 绘制背景图
            await ctx.drawImage(this.staticImgs.img, 0, 0, w, h)
              
            // 头像
            await ctx.drawRoundImage(this.avatar, 26,80, 100, 100, 100)
            
            ctx.fillStyle = '#FFF'
            ctx.font = 'normal 24px PingFang SC'
            ctx.fillText(this.nickName,150, 138)
          })
          
          dp.draw(async (ctx)=>{
            // 小程序二维码
            await ctx.drawRoundImage(this.qrCode, 285, 660, 180, 180, 100)
          })
          
          
          
          this.downloadUrl = await dp.create()
        }catch(e){
          this.$showToast('生成失败，请重试')
          this.closeHandle()
        }
        this.show = true
        uni.hideLoading()
        console.log(this.downloadUrl, '---this.downloadUrl')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .invite-poster-wrapper{
    position: relative;
    width: 710rpx;
    image{
      width: 100%;
    }
    
    .save-tip-wrapper{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 74rpx;
      display:  flex;
      justify-content: center;
      
      .save-tip{
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #953C13;
        line-height: 45rpx;
        letter-spacing: 1px;
        font-style: normal;
      }
    }
  }
</style>